<template>
  <div class="toc-container">
    <scroller height="60vh">
      <ul class="toc-list">
        <li class="toc-item" v-for="(ch, i) in toc" :key="i">
          <a class="chapter-link" @click="viewChapter(ch)">{{ch.title}}</a>
          <span class="edit">
            <ri i="edit" @click="editChapter(ch)"></ri>
          </span>
        </li>
      </ul>
    </scroller>
  </div>
</template>

<script>
import Scroller from "@tools/Scroller.vue";
export default {
  props: ["mat"],
  components: {
    Scroller
  },
  data() {
    return {
      mid: this.mat.id,
      toc:[],
    };
  },
  created() {
    this.authGet("/api/v1/mats/toc/" + this.mid).then(res => {
      console.log("got book", res.data);
      this.toc = res.data;
    });
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    tocdata() {
      // transform toc data into tree data
      this.data = [];
      for (let ch of this.tocdata) {
        var node = {};
        node.id = ch.id;
        node.label = ch.title;
        node.children = [];
        this.data.push(node);
      }
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    tocSelected(entry) {
      let chapid = entry.id;
      this.$emit("toc-change", chapid);
      this.$router.push("/mas/view/" + chapid);
    },
    toggleSearch() {
      if (this.showFilter) {
        this.filterText = "";
      }
      this.showFilter = !this.showFilter;
    },
    viewChapter(chapter) {
      this.$router.push(`/mats/view/${chapter.id}`)
    },
    editChapter(chapter) {
      this.$router.push(`/mats/edit/${chapter.id}`)
    },
  }
};
</script>

<style lang="stylus">
.toc-container
  span
    margin-left 5px

  ul.toc-list
    text-align left

    li.toc-item
      padding 10px

      a.chapter-link
        cursor pointer

      a.chapter-link:hover
        color #208EFF

      .edit
        float right
        margin-right 5px
        cursor pointer

      &:hover
        background-color #E2F0FF
    

</style>
